<template>
  <div>
    <!-- 标题以及添加班级添加按钮 -->
    <div class="header">
        <div><h1>班级管理</h1></div>
        <div>
          <!-- 添加按钮 -->
          <el-button @click="addClassbutton" type="primary">添加班级</el-button>
          <!-- 添加按钮弹出的提示框 -->
            <el-dialog v-model="dialogVisible" width="30%" :before-close="handleClose" :destroy-on-close="true" :align-center="true" :title="resTbale" >
              <!-- 添加的input输入框 -->
              <span>
                <el-form :inline="true" :model="addobj" class="demo-form-inline" :rules="rules">
                  <el-form-item label="班级名称" prop="name">
                    <el-input  v-model="addobj.name" placeholder="请输入关键字" />
                  </el-form-item>
                
                  <el-form-item label="部门" prop="depid" >
                    <el-cascader :change-on-select="true" :props="defaultParams" :options="options" @change="addgetid" :clearable="true"></el-cascader>
                  </el-form-item>
                </el-form>
              </span>
                <template #footer >
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button   type="primary" @click="addcontent(ids)">{{resdata===true?'添加':'修改'}}</el-button>
                  </span>
                 </template>
            </el-dialog>
        </div>
    </div>
    <!-- 查询 -->
    <div class="title">
      <el-form :inline="true" :model="obj" class="demo-form-inline">
        <!-- 查询input输入框 -->
        <el-form-item label="班级名称">
          <el-input v-model="obj.key" placeholder="请输入关键字" />
        </el-form-item>
        <!-- 查询选择部门 -->
        <el-form-item label="部门">
          <el-cascader :change-on-select="true" @change="getdepid" :props="defaultParams" :options="options" v-model="selectedOptions" :clearable="true" ref="id"></el-cascader>
        </el-form-item>
        <!-- 查询按钮 -->
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 列表 -->
    <div>
      <!-- 批量删除 -->
      <el-button type="danger" @click="delAll">批量删除</el-button>
      <el-table :data="tableData" style="width: 100%"  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
              <el-table-column label="班级名称" width="800" >
                <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="部门" width="750">
                <template #default="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ scope.row.depname }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button text @click="handleEdit(scope.row.id)"  type="primary">修改</el-button>
            <el-button size="small" type="primary" text @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-config-provider :locale="zhCn">
      <div class="demo-pagination-block">
       <el-pagination
          v-model:current-page="obj.page"
          v-model:page-size="obj.psize"
          :page-sizes="[5, 10, 15, 20]"
          :small="small"
          :disabled="disabled"
          :background=  "background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />  
     </div>
    </el-config-provider>
   
  </div>
</template>
  
  <script lang="ts" setup>
import { reactive ,ref} from "vue";
import { ElMessageBox,ElMessage } from 'element-plus'//弹出提示框
import type { FormRules } from "element-plus"; // 提示信息
import { Timer } from '@element-plus/icons-vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'//分页
import http from '../../api/class'
import { addClass } from "element-plus/es/utils";
import { add } from "lodash";
// 查询按钮
let obj=reactive({
  page:1,
  psize:5,
  key:"",
  depid:0
})

const onSubmit = () => {
  list()
};
// 获取部门id
const getdepid=(val:any)=>{
  obj.depid=val[val.length-1]
}
// 校验添加  
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
  depid: [{ required: true, message: "请选择部门名称", trigger: "blur" }],
});
// 添加弹出提示框
const dialogVisible = ref(false)
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定退出添加吗')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
// 切换添加修改
const resdata:any=ref(true)
const resTbale:any=ref('')
const addClassbutton=()=>{
  dialogVisible.value=true
  resdata.value=true
  resTbale.value='添加班级'
}
// 点击获取id
const ids=ref()
// 添加数据
const addobj=reactive({
  name:"",
  depid:0,
  id:ids
})

const addgetid=(val:any)=>{ 
  // console.log(val,1);
  addobj.depid=val[val.length-1]
}

// 修改
const handleEdit:any =(id:number)  => {
  dialogVisible.value=true
  resdata.value=false
  resTbale.value=false
  resTbale.value='修改班级'
  ids.value=id  
}
const addcontent=async(ids:number)=>{
  resdata.value=true
  dialogVisible.value=false
  // 如果ids为零的时候走添加
  console.log(ids);
  if(ids==undefined){
    let res:any=await http.classAdd(addobj)
    if(addobj.name==''&&addobj.depid==0){
      ElMessage({
        message:"请填写完整信息",
        type:"error"
      })
      return false
    }
  if(res.errCode='10000'){
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
    list()
    addobj.name=''
    addobj.depid=0
  }else{
    ElMessage({
      message: res.errMsg,
      type: 'error',
    })
  }
  }else{
    let res:any=await http.classAdd(addobj)
    console.log(res);
    if(res.errCode='10000'){
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    list()
    addobj.name=''
    addobj.depid=0
  }else{
    ElMessage({
      message: res.errMsg,
      type: 'error',
    })
  }
    
  }
 
   // 不然则走修改
}
// 删除
const handleDelete = (id:number ) => {
  ElMessageBox.confirm(
    '确定要删除该班级吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )  
    .then(async() => {
      let res:any=await http.classDelone({id:id})
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      list()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: "删除失败",
      })
    }) 
}
// 批量删除
const arr:any=ref([])
const handleSelectionChange =async (val: any[]) => {
  arr.value=val.map((item)=>item.id)
   console.log(arr); 
}
const delAll=(val:any)=>{
  ElMessageBox.confirm("确定要删除信息吗？","提示",{
    confirmButtonText:"确认",
    cancelButtonText:"取消",
    type:"warning"
  }).then(async()=>{
    let res:any=await http.classDelall({id:arr.value})
    console.log(res);
    if(res.errCode=='10000'){
      ElMessage({
        type:'success',
        duration:1000,
        message:"删除成功"
      })
      list()
    }else{
      ElMessage({
        type:'error',
        duration:1000,
        message:res.errMsg
      })
    }
  }).catch(()=>{

  })
}
const selectedOptions:any=ref([])
const defaultParams:any=ref({
        label: 'name',
        value: 'id',
        children: 'children'
})
const counts:any=ref(0)
// 请求列表赋值到tableData
const tableData:any=ref([])
const list=async()=>{
  let res:any=await http.classList(obj) 
  if(res.errCode=='10000'){
    tableData.value = res.data.list;
    counts.value=res.data.counts
  }else{
    ElMessage.error(res.errMsg)
  } 
}
// 必须调用
list()
// 分页
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  list()
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  obj.page=val
  list()
}
const options = ref([])
// 获取部门级联选择器数据
let obj1=reactive({
  page:1,
  psize:5,
})
const departList=async()=>{
  let res:any=await http.departmentList(obj1)
  // console.log(res);
  options.value = res.data.list 
}
departList()



</script>
  
<style lang="less">
*{
  padding: 0;
  margin: 0;
}
.title{
  margin-top: 20px;
  margin-left: 20px;
}
.header{
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.demo-pagination-block{
  display: flex;
  justify-content: center;
}
</style>